<template>
  <div class="form-view-block">
    <div class="form-view-row">
      <label>{{$t('common.base.logisticsCompany')}}</label>
      <div class="form-view-row-content">
        {{ company && company.name }}
      </div>
    </div>
    <div class="form-view-row">
      <label>{{$t('common.base.logisticsNo')}}</label>
      <div class="form-view-row-content">
        <span
          class="logistics-num"
          :class="{ link: hasQuota }"
          @click="handleViewDetail"
          v-loading="checking"
        >
          {{ no }}
        </span>
      </div>
    </div>
    <div class="form-view-row" v-if="isShowEndPhone">
      <label>{{$t('common.base.afterPhone', {data1:4})}}</label>
      <div class="form-view-row-content">
        <span
          class="logistics-num"
        >
          {{ phone }}
        </span>
      </div>
    </div>
    <logistics-dialog
      :visible.sync="dialogShow"
      :info="{ no, phone, ...company }"
      :mode="mode"
      :biz-id="bizId"
    ></logistics-dialog>
  </div>
</template>

<script>
import propSet from '@src/component/form/components/props';
import { getLogisticsQuotaDetail } from '@src/api/FieldApi';
import LogisticsDialog from './LogisticsDialog.vue';

export default {
  name: 'form-logistics-view',
  components: {
    LogisticsDialog,
  },
  props: {
    field: propSet.field,
    value: propSet.arrayValue,
    mode: {
      type: String,
      default: ''
    },
    bizId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      company: '', // 物流公司
      no: '', // 物流单号
      dialogShow: false, // 物流弹框是否显示
      checking: false, // 检查状态
      hasQuota: false, // 是否能查看
      isShowEndPhone: false, // 是否显示手机号码后4位
      phone: '',
    };
  },
  computed: {
    /** 
     * @description 是否可以点击查看物流信息
    */
    isCanLogisticsNoLink() {
      return Boolean(this.hasQuota && this.field?.setting?.canCheckForStaff)
    }
  },
  mounted() {
    this.init();
    if (this.field.setting.canCheckForStaff) {
      this.checkQuota();
    }
  },
  watch: {
    value(v) {
      // 外部更新数据
      if (v.length) {
        this.init();
        if (this.field.setting.canCheckForStaff) {
          this.checkQuota();
        }
      }
    },
  },
  methods: {

    // 初始化
    init() {
      if (this.value && this.value[0]) {
        const { company, no, phone } = this.value[0];
        // 顺丰快递处理
        if(company && company.id === 42)  {
          this.isShowEndPhone = true;
          this.phone = phone;
        }
        
        this.company = company;
        this.no = no;
      }
    
    },
    // 查询是否还有剩余可使用次数
    async checkQuota() {
      try {
        if (this.checking) return;
        this.checking = true;
        this.hasQuota = await getLogisticsQuotaDetail();

        return this.hasQuota;
      } catch (err) {
        const message =
          (err && err.message) ||
          this.$t('common.form.tip.logistics.tips5');
        this.$alert(message);
      } finally {
        this.checking = false;
      }
    },
    // 查看物流信息
    async handleViewDetail() {
      try {
        if (!this.hasQuota) return; // 没有次数直接不允许点
        const has = await this.checkQuota();
        if (!has) return;
        this.dialogShow = true;
      } catch (error) {
        console.error('查询余额:', error);
      }
    },
  },
};
</script>

<style lang="scss" scope>
.logistics-num.link {
  color: $color-primary;
  cursor: pointer;
  &:hover {
    // 这里的颜色兼容之前的颜色值
    color: $color-primary-light-3;
  }
}
</style>
